<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="6" :xs="24">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div>
          <div>
            <!--<div class="text-center">-->
            <!--  <userAvatar />-->
            <!--</div>-->
            <div>
              <el-upload
                class="avatar-uploader"
                action="http://localhost:8080/file/upload"
                :headers="token"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
            <ul style="list-style-type: none; padding-inline-start: 0;">
              <li class="list-group-item" style="">
                用户名称
                <div class="pull-right">{{ user.userName }}</div>
              </li>
              <li class="list-group-item" style="margin-top: 5px">
                手机号码
                <div class="pull-right">{{ user.phonenumber }}</div>
              </li>
              <li class="list-group-item" style="margin-top: 5px">
                用户邮箱
                <div class="pull-right">{{ user.email }}</div>
              </li>
              <li class="list-group-item" style="margin-top: 5px">
                创建建日期
                <div class="pull-right">{{ user.createTime }}</div>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <!--<el-col :span="18" :xs="24">-->
      <!--  <el-card>-->
      <!--    <div slot="header" class="clearfix">-->
      <!--      <span>基本资料</span>-->
      <!--    </div>-->
      <!--    <el-tabs v-model="activeTab">-->
      <!--      <el-tab-pane label="基本资料" name="userinfo">-->
      <!--        <userInfo :user="user" />-->
      <!--      </el-tab-pane>-->
      <!--      <el-tab-pane label="修改密码" name="resetPwd">-->
      <!--        <resetPwd />-->
      <!--      </el-tab-pane>-->
      <!--    </el-tabs>-->
      <!--  </el-card>-->
      <!--</el-col>-->
    </el-row>
  </div>
</template>

<script>
import userAvatar from './userAvatar'
import userInfo from './userInfo'
import resetPwd from './resetPwd'
import { getUserProfile, updateUser, updateUserAvater } from '@/api/system/user'

export default {
  name: 'Profile',
  components: { userAvatar, userInfo, resetPwd },
  data () {
    return {
      user: JSON.parse(localStorage.getItem('user')),
      activeTab: 'userinfo',
      imageUrl: JSON.parse(localStorage.getItem('user')).avatar,
      token: {
        Authorization: localStorage.getItem('token')
      },
      form: {}
    }
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)

      updateUserAvater(res.data.url)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!')
      }
      return isJPG && isLt10M
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
